<template>
  <div class="app-container">
    <van-nav-bar title="赛事报名" left-arrow @click-left="$router.push('/home')" />
    <div class="content-box" v-loading="dataLoading">
      <!-- <el-scrollbar> -->
      <el-input class="search" v-model="form.name" placeholder="搜索你想要找到的赛事" @change="getData" />
      <img class="banner" :src="require('@/assets/images/activityRegister/banner.png')" alt="">
      <div class="filter-box">
        <!-- <el-select class="branch-select" v-model="form.branch">
            <el-option v-for="(item, index) in branchList" :key="index" :label="item" :value="item" />
          </el-select> -->
        <div class="type-box">
          <div class="type-item" :class="form.type == item.value && 'active'" v-for="(item, index) in typeList"
            :key="index" @click="handleTypeChange(item)">
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="list-box my">
        <div class="list-title">我的报名</div>
        <div class="list-content" v-if="myItemList.length">
          <div class="list-item" v-for="(item, index) in myItemList" :key="index" @click="toDetail(item,'record')">
            <div class="item-cover">
              <img class="cover-img" :src="item.imageUrl">
            </div>
            <div class="item-label-box">
              <div class="item-label">{{ item.activityName }}</div>
              <div class="item-tip">报名姓名：{{ item.name }}</div>
              <div class="item-tip">报名时间：{{ item.registrationTime }}</div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
      <div class="list-box activity">
        <div class="list-title">热门赛事</div>
        <div class="list-content" v-if="activityItemList.length">
          <div class="list-item" v-for="(item, index) in activityItemList" :key="index" @click="toDetail(item)">
            <div class="item-cover">
              <img class="cover-img" :src="item.imageUrl">
            </div>
            <div class="item-label-box">
              <div class="item-label">{{ item.name }}</div>
              <div class="item-tip">截止日期：{{ item.endTime }}</div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script>
import * as api from '@/api/competitionsManger/index.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';

export default {
  name: 'ActivityRegister',
  data() {
    return {
      form: { name: '', branch: '越秀', type: 1 },
      branchList: ['天河', '番禺', '白云', '越秀', '海珠', '荔湾', '黄埔', '增城', '花都', '南沙', '其他'],
      typeList: [
        { label: '体育竞技', value: 1 },
        { label: '电子竞技', value: 2 },
        { label: '文化才艺', value: 3 },
      ],
      activityItemTotal: 0,
      activityItemList: [],
      myItemList: [
        { label: 'AI技术讲解AI技术讲解AI技术讲解AI技术讲解', date: '2025年2月12日', cover: 'activity_item_cover.png' },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.dataLoading = true;
      api.getCompetitionsList({ ...this.form }).then((res) => {
        this.activityItemList = res.rows;
        this.activityItemTotal = res.total;
        api.getCompetitionsRecordList({ userId: this.userId }).then((res) => {
          this.myItemList = res.rows.filter((record) => {
            const condolenceItem = this.activityItemList.find((item) => item.id == record.competitionId);
            if (condolenceItem) {
              record.activityName = condolenceItem.name;
              record.imageUrl = condolenceItem.imageUrl;
              return record;
            }
          });
          this.dataLoading = false;
        });
      });
    },
    handleTypeChange(item) {
      this.form.type = item.value;
      this.getData();
    },
    toDetail(item, type) {
      if (type == 'record') {
        this.$router.push({ name: 'ActivityRegisterDetail', query: { id: item.competitionId, recordId: item.id } });
      } else {
        this.$router.push({ name: 'ActivityRegisterDetail', query: { id: item.id } });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

.search {
  margin-bottom: 10px;

  ::v-deep .el-input__inner {
    border-radius: 20px;
  }
}

.banner {
  width: 100%;
  margin-bottom: 10px;
}

.filter-box {
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  .branch-select {
    width: 80px;
    ::v-deep .el-input__inner {
      background-color: transparent;
      border: none;
    }
  }

  .type-box {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .type-item {
      padding: 2px 0;
      color: #3d3d3d4c;

      &.active {
        color: #565656;
      }
    }
  }
}

@include list-box-style;

.list-box {
  margin-bottom: 10px;
  flex: 1;
  overflow: auto;
  .item-label-box {
    padding: 0 !important;
  }
}
</style>
